import "./app.scss";
import About from "./About";
import Home from "./Home";
import Block from "./Block";
import Contact from "./Contact";
import React, { useState } from "react";
const App = () => {
  const [num, setNum] = useState(0);
  const arr = [
    <About></About>,
    <Home></Home>,
    <Block></Block>,
    <Contact></Contact>,
  ];
  const lis = ["HOME", "ABOUT", "BLOG", "CONTACTS"];
  const click = (index) => {
    setNum(index);
  };
  return (
    <div className="app">
      <header>
        <div className="header-img">
          <img
            src="https://www.jq22.com/demo/jqueryGrjlmoban202102230302/images/logo.png"
            alt=""
          />
        </div>
        <div className="header-nav">
          <div className="left">
            <ul>
              {lis.map((item, index) => {
                return (
                  <li key={index} onClick={() => click(index)}>
                    {item}
                  </li>
                );
              })}
            </ul>
          </div>
          <div className="right">
            <input type="text" placeholder="Search" />
            <span>搜索</span>
          </div>
        </div>
      </header>
      <main>
        {arr.map((item, index) => {
          return num === index ? (
            <div key={index}>{item}</div>
          ) : (
            ""
          );
        })}
      </main>
      <footer>
        <div className="footer">
          {/* padding */}
          <div>
            <div>
              <h1>ABOUT US</h1>
              <p>
                Ut volutpat consectetur aliquam. Curabitur auctor in nis ulum
                ornare. Metus elit vehicula dui. Curabitur auctor in nis ulum
                ornare. Sed consequat, augue condimentum fermentum
              </p>
              <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque la udantium
              </p>
            </div>
          </div>
          <div>
            <div className="foote2">
              <h1>RECENT POST</h1>
              <p>MOST VISITED COUNTRIES</p>
              <p>5 PLACES THAT MAKE A GREAT HOLIDAY</p>
              <p>PEBBLE TIME STEEL IS ON TRACK TO SHIP IN JULY</p>
              <p>STARTUP COMPANY’S CO-FOUNDER TALKS ON HIS NEW PRODUCT</p>
            </div>
          </div>
          <div>
            <div className="footer3">
              <h1>WHERE TO FIND US</h1>
              <i>
                AUBERGE LONDON Ut wisi enim Minim veniam 12345 Exerci Tation
              </i>
              <p>
                Opening Hours: Mon - Fri: 9:00 - 21:00 Sat - Sun: 9:00 - 2:00
              </p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};
export default App;
